<!--
 * @Description: 墙布变更单
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-11 09:49:19
 * @FilePath: /yuxiuproweb/src/views/qb/change/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="500px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户" prop="clientId">
            <el-select
              style="width: 100%"
              v-model="form.clientId"
              filterable
              placeholder="请选择客户"
              remote
              reserve-keyword
              :remote-method="getListClient"
              @change="handleClientChange"
            >
              <el-option
                v-for="item in clientList"
                :key="item.clientId"
                :label="item.clientName"
                :value="item.clientId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人" prop="name">
            <el-input v-model="form.name" placeholder="请输入收货人" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="电话号" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入电话号" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="省市区" prop="address">
            <!-- <el-input v-model="form.region" placeholder="请输入省市区" /> -->
            <el-cascader
              style="width: 100%"
              v-model="form.region"
              :options="region"
              filterable
              clearable
              :props="{
                label: 'regionName',
                value: 'regionId',
                children: 'child',
              }"
              placeholder="请选择省市区"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入详细地址" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设为默认" prop="isDefault">
            <el-switch
              v-model="form.isDefault"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getAddressListItem,
  addAddressListItem,
  updateAddressListItem,
} from "@/api/transport/shipAddress";
import { listClient } from "@/api/mes/md/client";
import { region, getRegionName, getRegionId } from "@/utils/regions.js";
export default {
  components: {},
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {
        name: "",
        tel: "",
        address: "",
        province: "", // 省份名称
        city: "", // 城市名称
        district: "", // 区名称
        provinceCode: "", // 省份 ID
        cityCode: "", // 城市 ID
        districtCode: "", // 区 ID
        region: [], // 省市区 ID 数组
        isDefault: 0,
        remark: "",
        clientId: null, //关联客户
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "收货人不能为空", trigger: "change" },
        ],
      },
      region, //省市区
      clientList: [], //客户信息
    };
  },
  computed: {
    title() {
      return {
        add: "添加收货地址",
        edit: "修改收货地址",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
    this.getListClient();
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      // console.log(this.data);
      getAddressListItem(this.data.deliveryAddressId).then((res) => {
        this.form = res.data;
        this.form.region = getRegionId([
          this.form.province,
          this.form.city,
          this.form.district,
        ]);
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);
      // 获取省市区名称
      const regionNames = getRegionName(this.form.region);
      if (regionNames) {
        const [province, city, district] = regionNames;
        this.form.province = province;
        this.form.city = city;
        this.form.district = district;
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!!this.form.deliveryAddressId) {
            updateAddressListItem(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addAddressListItem(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    // 查询客户信息
    getListClient(clientName = "") {
      listClient({
        pageNum: 1,
        pageSize: 100,
        enableFlag: "Y",
        clientName,
      }).then(({ rows }) => {
        this.clientList = rows;
      });
    },
    // 修改客户
    handleClientChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
